$radio: (
  group-row-number: 0,
);
/* stylelint-disable no-descending-specificity */
@include b(radio) {
  @include set-component-css-var(radio, $radio);

  .el-radio__label {
    display: flex;
    align-items: center;
    overflow: hidden;
    .#{bem(icon)}{
      display: flex;
      margin-right: getCssVar(spacing, extra-tight),;
    }
  }
  @include e(text) {
    overflow: hidden;
    font-size: getCssVar(form-item, font-size);
    color: getCssVar(form-item, text-color);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @include m(readonly) {
    font-size: getCssVar(form-item, font-size);
    line-height: getCssVar(editor, default, line-height);
    color: getCssVar(form-item, readonly-color);
  }

  @include e(button) {
    @include m(round-corner){
      margin-right: getCssVar(spacing, base-loose);

      &.el-radio-button.is-active {
        .el-radio-button__inner {
          color: getCssVar(color, primary);
          background-color: getCssVar(color, secondary, light, default);
          border-color: getCssVar(color, secondary, light, default);
        }

        .el-radio-button__original-radio:checked+.el-radio-button__inner {
          box-shadow: none;
        }
      }

      &.el-radio-button .el-radio-button__inner {
        padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'base');
        background-color: getCssVar(color, tertiary, light, hover);
        border-color: getCssVar(color, tertiary, light, hover);
        border-radius: getCssVar(height-control, default);

        &:nth-last-child(1) {
          margin: 0;
        }
      }

      &.el-radio-button.is-disabled {
        &.is-active .el-radio-button__inner {
          border: getCssVar('border-thickness', 'control') solid getCssVar(color, disabled, text);
        }

        .el-radio-button__inner {
          color: getCssVar(color, disabled, text);
          background: getCssVar(color, disabled, bg);
          border-color: getCssVar(color, disabled, border);
        }
      }
    }

    .el-radio-button__inner {
      display: flex;
      align-items: center;
      justify-content: center;
  
      .#{bem(icon)}{
        display: flex;
        margin-right: getCssVar(spacing, extra-tight),;
      }
    }

    @include m(text) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  
  @include when(grid-layout){
    .el-radio-group{
      display: grid;
      grid-template-columns: repeat(getCssVar(radio, group-row-number), 1fr);
    }
  }
}


@include b(form-item){

  @include b(radio) {
    @include when(show-default){
      padding: getCssVar(form-item, hover-edit-padding);
    }
  }
}

@include b(radio-tab) {
  display: flex;
  height: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

@include b(radio-tab-item){
  position: relative;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 100%;
  padding: getCssVar(spacing, base, tight);
  font-size: getCssVar(font-size, regular);
  cursor: pointer;

  &:hover{
    color: getCssVar(color, primary);
  }

  .#{bem(icon)}{
    display: flex;
    margin-right: getCssVar(spacing, extra-tight),;
  }

  @include when(selected){
    &::after{
      position: absolute;
      bottom: 2px;
      left: getCssVar(spacing, base, tight);
      width: calc(100% - 2 * getCssVar(spacing, base, tight));
      height: 2px;
      content: "";
      background-color: getCssVar(color, primary);
    }
  }
  
  @include when(disabled){
    color: getCssVar(color, disabled, text);
    cursor: not-allowed;

    &::after{
      background-color: getCssVar(color, disabled, text);
    }
  }

  @include e(text) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}